import React from 'react';
import { Link } from 'react-router-dom';
import { Copywriting } from '../../types';

interface CopywritingCardProps {
  copywriting: Copywriting;
}

const CopywritingCard: React.FC<CopywritingCardProps> = ({ copywriting }) => {
  return (
    <div className="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow duration-200">
      <h3 className="text-lg font-semibold text-gray-900 mb-2">
        {copywriting.title || '未命名文案'}
      </h3>
      <p className="text-gray-600 mb-4 line-clamp-3">{copywriting.content}</p>
      <div className="flex items-center justify-between text-sm text-gray-500">
        <div className="flex space-x-4">
          <span>👍 {copywriting.likes}</span>
          <span>⭐ {copywriting.favorites}</span>
        </div>
        <Link
          to={`/copywriting/${copywriting.id}`}
          className="text-blue-600 hover:text-blue-700"
        >
          查看详情
        </Link>
      </div>
      <div className="mt-4 flex flex-wrap gap-2">
        {copywriting.tags.map((tag) => (
          <span
            key={tag}
            className="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs"
          >
            {tag}
          </span>
        ))}
      </div>
    </div>
  );
};

export default CopywritingCard;
